<template>
  <div class="title">
    <div class="title_top">案件统计</div>

    <div class="title_num">
      <div class="title_num_item">
        <div class="title_num_item_top" v-text="collect.todoTotal"></div>
        <div class="title_num_item_bottom">处理中</div>
      </div>
      <div class="title_num_item">
        <div class="title_num_item_top" v-text="collect.compleTotal"></div>
        <div class="title_num_item_bottom">已办案件</div>
      </div>
      <div class="title_num_item">
        <div class="title_num_item_top" v-text="collect.allTotal"></div>
        <div class="title_num_item_bottom">全局已办</div>
      </div>
    </div>

    <a-tabs style="margin-top: 23px" v-model="activeKey" @change="changeTabs">
      <a-tab-pane key="1" tab="行政行为"></a-tab-pane>
      <a-tab-pane key="2" tab="决定类型"></a-tab-pane>
      <a-tab-pane key="3" tab="被申请人"></a-tab-pane>
    </a-tabs>
    <a-spin :spinning="loading">
      <div
        v-if="dataAxis && dataAxis.length > 0"
        class="echart"
        id="mychart"
        :style="{ float: 'left', width: '100%', height: '200px' }"
      ></div>
      <a-empty v-else style="margin-top: 20px" />
    </a-spin>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { countPrtype, countDecisionType, countTargetTop, queryCaseStatistics } from '@/api/home/apl_statistic.js'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import storage from 'store'
export default {
  name: 'LeftTop',
  data () {
    return {
      collect: {
        todoTotal: '-', // 我的待办总数
        compleTotal: '-', // 我的已办总数
        allTotal: '-' // 全局已办总数
      },
      list: [{}, {}, {}, {}],
      activeKey: '1',
      yMax: 300,
      dataShadow: [],
      dataAxis: [],
      data: [],
      loading: false,
      currentUser: storage.get(APP_USER) // 登录人信息
    }
  },
  async mounted () {
    this.queryTotal()
    await this.countPrtype()
    if (this.dataAxis && this.dataAxis.length > 0) {
      this.initEcharts()
    }
  },
  methods: {
    // 案件总数统计查询
    async queryTotal () {
      const { data } = await queryCaseStatistics(this.currentUser.userId)
      // console.log('案件总数统计', data)
      this.collect = data
    },
    // 案件统计tab切换
    async changeTabs (key) {
      if (key == '1') {
        await this.countPrtype()
        if (this.dataAxis && this.dataAxis.length > 0) {
          this.initEcharts()
        }
      } else if (key == '2') {
        await this.countDecisionType()
        if (this.dataAxis && this.dataAxis.length > 0) {
          this.initEcharts()
        }
      } else if (key == '3') {
        await this.countTargetTop()
        if (this.dataAxis && this.dataAxis.length > 0) {
          this.initEcharts()
        }
      }
    },
    /**
     * 统计行政行为的柱状图
     */
    async countPrtype () {
      this.loading = true
      const res = await countPrtype({})
      if (res.code !== 0) {
        this.$message.error('查询行政行为统计失败')
      } else {
        this.dataAxis = res.data.columnList
        this.data = res.data.valueList
      }
      this.loading = false
    },
    /**
     * 统计决定类型柱状图
     */
    async countDecisionType () {
      this.loading = true
      const res = await countDecisionType({})
      if (res.code !== 0) {
        this.$message.error('查询决定类型统计失败')
      } else {
        this.dataAxis = res.data.columnList
        this.data = res.data.valueList
      }
      this.loading = false
    },
    /**
     * 统计被申请人柱状图
     */
    async countTargetTop () {
      this.loading = true
      const res = await countTargetTop({})
      if (res.code !== 0) {
        this.$message.error('查询统计被申请人失败')
      } else {
        this.dataAxis = res.data.columnList
        this.data = res.data.valueList
      }
      this.loading = false
    },

    initEcharts () {
      if (this.data) {
        for (let i = 0; i < this.data.length; i++) {
          this.dataShadow.push(this.yMax)
        }
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: 20,
          containLabel: true
        },
        legend: {
          data: this.dataAxis,
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 70
        },
        top: '10%',
        xAxis: {
          type: 'category',
          boundaryGap: true, // 设置为true
          data: this.dataAxis,
          axisLabel: {
            // inside: false,
            color: '#999999',
            interval: 0,
            rotate: 30, // 文字逆时针旋转45°
            width: 40,
            overflow: 'break-all',
            ellipsis: '...',
            formatter: val => {
              let result = ''
              const textLength = val.length
              const limitNumber = 6 // 一行显示几个字
              if (textLength > limitNumber) {
                for (var i = 0; i < textLength; i += limitNumber) {
                  result += val.substring(i, i + limitNumber) + '\n'
                }
                result = result.trim() // 移除最后一个换行符
              } else {
                result = val
              }
              return result
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: false,
            barWidth: '20%',
            itemStyle: {
              color: '#3AA1FF'
            },
            emphasis: {
              itemStyle: {
                color: '#3AA1FF'
              }
            },
            data: this.data
          }
        ]
      }
      const myChart = echarts.init(document.getElementById('mychart')) // 图标初始化
      myChart.setOption(option, true) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  flex-direction: column;
  .title_top {
    padding-bottom: 16px;
    border-bottom: 3px solid #f5f5f5;
    display: flex;
    flex-direction: row;
    font-size: 23px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #2c2c2c;
    justify-content: space-between;
    height: 40px;
  }
  .title_num {
    margin-top: 25px;
    display: flex;
    padding: 10px 10%;
    flex-direction: row;
    justify-content: space-between;
    background: #e7e7e7;
    .title_num_item {
      display: flex;
      flex-direction: column;
      .title_num_item_top {
        font-size: 34px;
        font-family: DIN;
        font-weight: bold;
        color: #0072c6;
        text-align: center;
      }
      .title_num_item_bottom {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #2c2c2c;
        text-align: center;
      }
    }
  }
}

::v-deep .ant-tabs-tab-active {
  height: 45px;
  color: white;
  background: #0072c6;
  border-color: #0072c6;
}

::v-deep .ant-tabs-tab {
  border-bottom-color: #0072c6;
  margin: 0px 10px 0px 0px;
  font-size: 16px;
}

::v-deep .ant-tabs-bar {
  border-bottom: 1px solid #0072c6;
}
</style>
